<template>
  <div>username is: {{ user.name }}</div>
  <div>my version is {{ message }}</div>
  <button @click="testUseSetupData">测试setup</button>
  <button type="button" @click="count++">count is: {{ count }}</button>
  <ul>
    <li v-for="item in todos" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
<script lang="ts">
// v2 Options 写法
import { useUserStore } from '@/stores/user';
import { defineComponent, unref } from 'vue';

type TodoItem = {
  id: number;
  name: string;
};

export default defineComponent({
  data() {
    return {
      message: 'v2',
      count: 0,
      todos: [] as TodoItem[],
    };
  },
  created() {
    this.todos = [
      {
        id: 1,
        name: 'yoyo',
      },
      {
        id: 2,
        name: 'check',
      },
    ];
  },
  methods: {
    testUseSetupData() {
      // const user = useUserStore();
      console.log('testUseSetupData', this.user.name);
    },
  },
  setup() {
    const user = useUserStore();
    return {
      user,
    };
  },
});
</script>
